<template>
  <section class="main">
    <div class="error-page" v-if="label_merchants.length == 0 && label_stores == 0 && label_bd == 0 && label_service == 0 ">
        <div class="error-desc">此标签暂未绑定任何用户</div>
    </div>
    <div class="title" v-if="label_merchants.length > 0">
      <span>标记商户</span>
    </div>
    <div class="container container1" v-if="label_merchants.length > 0">
        <el-button class="el_tag"
            @click="toMerchantsinfo(item.id)"
            type="primary" plain
            v-for="item in label_merchants"
            :key="item.label"
            effect="plain">
            {{ item.name }}
        </el-button>
    </div>
    <div class="title" v-if="label_stores.length > 0">
      <span>标记门店</span>
    </div>
    <div class="container container1" v-if="label_stores.length > 0">
        <el-button class="el_tag"
            @click="toStoresinfo(item.id)"
            type="primary" plain
            v-for="item in label_stores"
            :key="item.label"
            effect="plain">
            {{ item.name }}
        </el-button>
    </div>
    <div class="title" v-if="label_bd.length > 0">
      <span>标记业态</span>
    </div>
    <div class="container container1" v-if="label_bd.length > 0">
        <el-button class="el_tag"
            @click="toBdinfo(item.id)"
            type="primary" plain
            v-for="item in label_bd"
            :key="item.label"
            effect="plain">
            {{ item.name }}
        </el-button>
    </div>
    <div class="title" v-if="label_service.length > 0">
      <span>标记服务商</span>
    </div>
    <div class="container container1" v-if="label_service.length > 0">
        <el-button class="el_tag"
            @click="toServiceprovidersinfo(item.id,item.type)"
            type="primary" plain
            v-for="item in label_service"
            :key="item.label"
            effect="plain">
            {{ item.name }}
        </el-button>
    </div>
  </section>
</template>

<script>
import { getlabelTagDetails} from "@/api/api";
export default {
  // name: "baseform",
  data() {
    return {
      label_id:'',//id
      label_merchants:[],//商户标签
      label_stores:[],//门店标签
      label_bd:[],//业态标签
      label_service:[],//商户标签
    };
  },
  created() {
    this.label_id = sessionStorage.getItem("labelDetails_id")
    // this.alterService.typeName = sessionStorage.getItem("serviceproviders_type")
    console.log(this.label_merchants.length)
  },
  mounted(){
    this.getlabelTagDetails()
  },
  
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    getlabelTagDetails(){
        var label_arr = []
        getlabelTagDetails({},this.label_id).then(res =>{
            if (res.code == 405) {
                sessionStorage.removeItem("token");
                this.$router.push("/login");
            } else if(res.code == 200){
                label_arr = res.data
                for(var i = 0;i < res.data.merchantList.length;i++){
                  this.label_merchants.push({"id":res.data.merchantList[i].fid,"name":res.data.merchantList[i].name})
                }
                for(var i = 0;i < res.data.shopList.length;i++){
                  this.label_stores.push({"id":res.data.shopList[i].fid,"name":res.data.shopList[i].name})
                }
                for(var i = 0;i < res.data.bdList.length;i++){
                  this.label_bd.push({"id":res.data.bdList[i].fid,"name":res.data.bdList[i].name})
                }
                for(var i = 0;i < res.data.agentList.length;i++){
                  this.label_service.push({"id":res.data.agentList[i].fid,"name":res.data.agentList[i].name,"type":res.data.agentList[i].type})
                }
                // this.label_stores = res.data.shopList
                // this.label_bd = res.data.bdList
                // this.label_service = res.data.agentList
            }else if(res.code == 500){
                this.$message.error(res.message);   
            }
        })
    },
    //跳转商户
    toMerchantsinfo(v){
      var id = parseInt(v)
      this.$router.push({
        path: "/merchantsinfo",
      });
      sessionStorage.setItem('merchants_id',JSON.stringify(id))
    },
    //跳转门店
    toStoresinfo(v){
      var id = parseInt(v)
      this.$router.push({ 
        path: "/storesinfo"
      });
      sessionStorage.setItem('store_id',JSON.stringify(id))
    },
    //跳转业态
    toBdinfo(v){
      var id = parseInt(v)
      this.$router.push({ 
        path: "/bdinfo",
      });
      sessionStorage.setItem('bdlist_id',JSON.stringify(id))
    },
    //跳转服务商
    toServiceprovidersinfo(v,t){
      var id = parseInt(v)
      this.$router.push({
          path: "/serviceprovidersinfo",
      });
      sessionStorage.setItem('serviceproviders_id',JSON.stringify(id))
      sessionStorage.setItem('serviceproviders_type',JSON.stringify(t))
    }
  },
};
</script>

<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container1 .itemBox {
  width: 50%;
}
.container1 .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container1 .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container1 .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
}
.red {
  color: red;
}
.tableBox {
  width: 100%;
}
.el-input{
  width: 70%;
}
.el_tag{
    margin-right: 10px;
    margin-bottom: 5px;
}
.error-page{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    box-sizing: border-box;
    margin-top: 30px;
}
.error-desc{
    font-size: 30px;
    color: #777;
}
</style>
